<template>
  <div>
    <Header></Header>
    <div class="mblog">
      <h2>{{blog.title}}</h2>
      <el-link type="primary" class="el-icon-edit" v-if="ownBlog">
        <router-link :to="{name:'BlogEdit',params: {blogId: blog.id}}">
        编辑
        </router-link>

        <el-button class="delbut" round @click="delblog">删除</el-button>
      </el-link>
      <i class="el-icon-edit"></i>
      <el-divider></el-divider>
      <div class="markdown-body" v-html="blog.content"></div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import "github-markdown-css/github-markdown.css"

export default {
  name: "BlogDetail.vue",
  components: {Header},
  data(){
    return {
      blog:{
        id: "",
        title: "默认标题",
        content: "默认内容"
      },
      ownBlog: false
    }
  },
  methods: {
    delblog(){
      const blogId = this.$route.params.blogId
      const _this = this
      if(blogId){
        this.$confirm('此操作将永久删除改文章，是否继续？','提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          _this.axios.post('/blogdel/'+blogId,null,{
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            this.$message({
              type: "success",
              message: res.data.data
            })
            _this.$router.push("/blogs")
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
      }
    }
  },
  created() {
    const blogId = this.$route.params.blogId
    const _this = this
    if (blogId){
      this.axios.get('/blog/' + blogId).then(res => {
        const blg = res.data.data
        const blog = res.data.data
        _this.blog.id = blog.id
        _this.blog.title = blog.title
        //对内容进行渲染，因为是Markdown格式
        var MarkownIt = require("markdown-it")
        var md = new MarkownIt()


        _this.blog.content = md.render(blog.content)

        //查看是否是登录人 是则可以编辑和删除
        _this.ownBlog = (blog.userId == _this.$store.getters.getUser.id)
      })
  }
  }
}
</script>

<style scoped>

.mblog{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 600px;
  padding: 20px 15px;
}
.delbut{
  margin: auto 10px;
}

</style>